<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    // var count = 1;
    // var container = document.getElementById('container');

    // function getUserAction() {
    //     container.innerHTML = count++;
    // };

    // container.onmousemove = getUserAction;
</script>
<script>
    //【5】立刻执行
    // 这个时候，代码已经很是完善了，但是为了让这个函数更加完善，我们接下来思考一个新的需求。
    // 这个需求就是：
    // 我不希望非要等到事件停止触发后才执行，我希望立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。
    // 想想这个需求也是很有道理的嘛，那我们加个 immediate 参数判断是否是立刻执行。[immediate,立即的;直接的]
    // 第四版


    var count = 1;
    var container = document.getElementById('container');

    function getUserAction() {
        container.innerHTML = count++;
    };

    container.onmousemove = debounce(getUserAction, 1000, 1);

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this;
            var args = arguments;
            //只要timeout存在，就清除定时器函数。但是变量timeout的值仍然存在。
            if (timeout) clearTimeout(timeout);
            debugger
            if (immediate) {
                // 如果已经执行过，不再执行
                var callNow = !timeout;
                //等wait时间后，将timout置为null。换句话说，每次点击事件，都会重写这个函数，保证，不能理解执行最后一个语句。
                timeout = setTimeout(function() {
                        timeout = null;
                    }, wait)
                    // 立即执行函数
                if (callNow) func.apply(context, args)
            } else {
                // 此处，如果，flag是false，就不会是立即执行函数
                timeout = setTimeout(function() {
                    func.apply(context, args)
                }, wait);
            }
        }
    }
</script>

</html>